<template>
  <div class="content">
    <div class="water">
      <div class="water-box" :style="{width:'auto',height :'100vh'}">
          <div class="water-title">
            <p>工艺处理效果<i class="gl"></i><i class="gl"></i></p>
          </div>
        <chart :options="chart" auto-resize></chart>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'waterF',
    data () {
      return {
        chart:{
          color:["#516b91",
        "#217bda",
        "#fa43f4",
        
        "#93b7e3",
        "#a5e7f0",
        "#edafda" ,'#0d2dd7','#9d4fff','#7effd4','#5050e8'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data:['领先','一环','中人','卓锦','科威','商达','通河','汀滢','清之源','宏电'],
            top: 20,
          },
          dataZoom: {
            show: false,
          },
          xAxis: [
            {
              type: 'category',
              data: ['12月1日','12月2日','12月3日','12月4日','12月5日','12月6日','12月7日','12月1日','12月2日','12月3日','12月4日','12月5日','12月6日','12月7日'],
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'ORP均值（mV）',
              splitLine: {lineStyle: {color: 'rgba(0,0,0,.1)'}}
           
            }
          ],
          series: [
            {
              name:'领先',
              type:'bar',
              data: [120,160,170,140,250,200,300,520,501,536,256,541,530,352],
            },
            {
              name:'一环',
              type:'bar',
              data: [200,200,200,200,200,200,200,200,200,200,200,200,200,200]
            },
            {
              name:'中人',
              type:'bar',
              data: [340,259,364,321,340,259,364,321,340,259,364,321,340,259]
            },
            {
              name:'卓锦',
              type:'bar',
              data: [123,124,154,124,123,124,154,124,123,124,154,124,123,124]
            },
            {
              name:'科威',
              type:'bar',
              data: [252,241,198,178,252,241,198,178,252,241,198,178,252,241]
            },
            {
              name:'商达',
              type:'bar',
              data: [112,178,154,168,112,178,154,168,112,178,154,168,112,178]
            },
            {
              name:'通河',
              type:'bar',
              data: [125,178,285,264,125,178,285,264,125,178,285,264,125,178]
            },
            {
              name:'汀滢',
              type:'bar',
              data: [145,187,354,321,254,145,187,354,321,254,145,187,354,321]
            },
            {
              name:'清之源',
              type:'bar',
              data: [168,157,152,188,168,157,152,188,168,157,152,188,168,157]
            },
            {
              name:'宏电',
              type:'bar',
              data: [420,214,441,357,420,214,441,357,420,214,441,357,420,214]
            },
          ],
        }
      }
    },
    mounted: function () {
      this.getData()
    },
    methods: {
      getData: function () {
        this.$http('/vqdisplay/manufacturercomparison/data')
        .then( response=> {
          let _data = response.data.body  
          this.chart.xAxis[0].data = _data.data.xAxis
          this.chart.legend.data = _data.data.legend
          if (_data.data.legend.length>0) {
            _data.data.legend.forEach((item,index) => {
              this.chart.series[index].name = item
              this.chart.series[index].data = _data.data.series[index][item]
            });
          }
        })
      }
    }
  }
</script>

<style scoped>
  @import '../../../style/water.css';
  .echarts {
    height: 90%;
    width: 100%;
  }
</style>